﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tintuc.aspx.cs" Inherits="famails.tintuc" MasterPageFile="~/famails.Master" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    

 <link rel="stylesheet" href="js/jqx/styles/jqx.base_news.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jqx/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqx/jqxchart.js"></script>
    <script type="text/javascript" src="js/jqx/jqxdata.js"></script>
    <script type="text/javascript" src="js/jqx/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jqx/jqxcheckbox.js"></script>
    <script type="text/javascript" src="js/jqx/jqxscrollbar.js"></script>
    <script type="text/javascript" src="js/jqx/jqxlistbox.js"></script>
    <script type="text/javascript" src="js/jqx/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="js/jqx/jqxmenu.js"></script>
    <script type="text/javascript" src="js/jqx/jqxgrid.js"></script>
    <script type="text/javascript" src="js/jqx/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="js/jqx/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="js/jqx/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="js/jqx/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="js/jqx/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="js/jqx/jqxdata.export.js"></script>
    <script type="text/javascript" src="js/jqx/jqxgrid.export.js"></script>
    <script type="text/javascript" src="js/jqx/jqxwindow.js"></script>
    <style>
        .social_blog {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 0px;
            color: #333;
            font-size: 20px;
            -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
            transition: 0.5s;
        }

            .social_blog:hover {
                background: #333;
                color: #fff;
            }

        .input-row {
            margin-bottom: 20px;
        }

        .input-helper {
            position: relative;
            display: inline-block;
            margin-bottom: 5px;
        }

            .input-helper:before {
                content: '';
                display: block;
                position: absolute;
            }


        .input-helper--checkbox {
            padding-left: 15px;
        }

        #row0jqxgrid {
            width:100% !important;
        }
            #row0jqxgrid .jqx-grid-cell {
            width:100% !important;
            }
            .input-helper--checkbox:before {
                top: 2px;
                left: 0;
                width: 13px;
                height: 13px;
                border: 1px solid #333;
            }
        
        input[type="checkbox"] {
            display: none;
        }

            input[type="checkbox"]:checked + label:before {
                background: #333;
            }
        h3 {
            margin-top:10px;
        }
    </style>
    <div class="main-page" style="padding-top: 20px; padding-bottom: 20px;
            font-family: 'Patrick Hand', cursive;">
    <div class="col-md-1 col-lg-1 hidden-sm hidden-xs"></div>
    <div class="col-md-10 col-lg-10 col-sm-12 col-xs-12">

        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-md-3 col-lg-3 hidden-xs hidden-sm" style="padding: 0px;">
                    <div class="col-md-12" style="background: #eee; border: 1px solid #eee; padding: 15px;padding-top:5px; padding-bottom: 25px;">
                        <div style="width: 100%;padding: 10px 0px;text-align: left;font-weight: bold;">
                            BÀI VIẾT NỔI BẬT
                        </div>
                        <div style="width: 100%; text-align: center; line-height: 50px; vertical-align: middle; padding-bottom: 10px;">
                            <asp:HyperLink runat="server" ID="lblTopRead1">
                                <asp:Image CssClass="img" runat="server" ID="imgTopRead" Style="width: 100%; max-height: 200px; overflow: hidden;" />
                            </asp:HyperLink>
                        </div>
                        <div style="width: 100%; text-align: left; font-weight: bold; font-size: 12px;">
                            <asp:HyperLink runat="server" style="text-decoration:none;"  ID="lblTopRead"></asp:HyperLink>
                        </div>
                    </div>
                    <div class="col-md-12" style="padding: 0px;">
                        <input type="text" oninput="loaddata(-1)" id="txtKeyword" name="txtKeyword" class="form-control" style="font-weight: bold; height: 45px; margin-top: 10px; border-radius: 0px; border-color: #eee; color: #333;" placeholder="Tìm kiếm " />
                    </div>
                    <div class="col-md-12" style="padding: 0px; margin-top: 10px; border: 1px solid #eee; color: #ccc;">
                        <asp:Repeater runat="server" ID="rptCategory">
                            <ItemTemplate>
                                <div class="col-md-12 form-control" style="background: #333; font-weight: bold; height: 45px; line-height: 35px; vertical-align: middle; border-radius: 0px; color: #fff; border: 1px solid #333;">
                                    <%#Eval("CategoryName") %>
                                    <i style="color: #fff; line-height: 35px; vertical-align: middle;" class="fa fa-circle-o pull-right"></i>
                                </div>
                                <asp:Repeater runat="server" ID="rptGroup" DataSource='<%# bus_group.GetAll("",1, Convert.ToInt32(Eval("CategoryID"))) %>'>
                                    <ItemTemplate>
                                        <div onclick='<%# "loaddata("+Eval("groupid")+")"%>' class="col-md-12" style="text-overflow:ellipsis;border-bottom: 1px solid #eee; height: 45px; overflow:hidden;line-height: 40px; vertical-align: middle; padding: 0px; padding-left: 10px; padding-right: 10px; color: #333;">
                                            <span><%#Eval("GroupName") %></span>
                                            <%--<input id="ttnam" type="checkbox" value="id_category" />
                                            <label for="ttnam" style="margin-top: 12px;" class="input-helper input-helper--checkbox pull-right"></label>--%>
                                        </div>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                    <div class="col-md-12" style="margin-top: 10px; padding: 0px; padding-bottom: 10px;">
                        <span class="btn social_blog" style="padding: 10px 20px 10px 20px;"><i class="fa fa-facebook"></i></span>
                        <span class="btn social_blog" style="padding: 10px 17px 10px 17px;"><i class="fa fa-twitter"></i></span>
                        <span class="btn social_blog" style="padding: 10px 16px 10px 16px;"><i class="fa fa-google-plus"></i></span>
                        <span class="btn social_blog" style="padding: 10px 17px 10px 17px;"><i class="fa fa-skype"></i></span>
                        <span class="btn social_blog" style="padding: 10px 17px 10px 17px;"><i class="fa fa-youtube"></i></span>
                    </div>
                    <div id="fb-root"></div>
                    <script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
                    <div class="fb-like-box" data-href="https://www.facebook.com/pages/FaMailscom/571963192902561" data-colorscheme="dark" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true" data-width="287px"></div>

                </div>
                <div class="col-md-9 col-lg-9 col-sm-12 col-xs-12" style="padding: 10px;">
                        <div style="width: 100%;padding: 15px 10PX;text-align: left;font-weight: bold;">
                            BÀI VIẾT MỚI NHẤT
                        </div>
                    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="font-weight: bold; font-size: 14px; padding: 0px; padding-top: 5px;">
                        <div class="col-md-5 hidden-xs col-sm-5 col-lg-5" style="padding: 5px; text-align: center;">
                            <asp:HyperLink runat="server" ID="hplDetail1">
                                <asp:Image ID="imgNewest" runat="server" style="max-width:100%;max-height:275px;min-height:100px;" />
                            </asp:HyperLink>
                        </div>
                        <div class="col-md-7 col-xs-12 col-lg-7 col-sm-7">
                            <h3 style="font-size:24px;">
                                <asp:HyperLink runat="server" style="text-decoration:none;" ID="hplDetail2">
                                    <asp:Label runat="server" ID="lblNewest_Title"></asp:Label>
                                </asp:HyperLink></h3>
                            <h5 style="padding-top:10px;height: 120px; overflow: hidden; text-align: justify;font-size:17px !important;">
                                <asp:Label runat="server" ID="lblNewest_Sum"></asp:Label>

                            </h5>
                            <div>
                                <asp:HyperLink runat="server" ID="hplDetail">
                                    <button class="btn" style="background: #333; border-radius: 0px; color: #fff; font-weight: bold; margin-right: 20px;">Xem chi tiết </button>
                                </asp:HyperLink>
                                <span style="margin-right: 20px; color: #066"><i class="fa fa-eye"></i>
                                    <asp:Label runat="server" ID="lblViewCount"></asp:Label></span>
                                <span>
                                    <i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>
                                    <i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>
                                    <i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>
                                    <i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>
                                    <i style="color: #fa0; margin-right: 3px;" class="fa fa-star-o"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="font-weight: bold; font-size: 14px; padding-bottom: 5px; padding-top: 25px; border-bottom: 2px solid #eee; color: #ccc;">
                        Sắp xếp <i style="margin-left: 10px;" class="fa fa-angle-up"></i>
                    </div>

                    <!-- end content-module-main -->
                    <style>
                        #contentjqxgrid {
                            width: 100% !important;
                        }

                        #pagerjqxgrid {
                            width: 100% !important;
                            padding: 0px;
                        }
                        #contenttablejqxgrid
                        {
                        font-family: 'Patrick Hand', cursive !important;
                        }
                    </style>
                    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:0px;">
                        <div id='jqxWidget' style="width: 100% !important; font-size: 17px;  float: left;">
                            <div id="jqxgrid" style="width: 100% !important;">
                            </div>
                        </div>
                    </div>
                    
    <script type="text/javascript">
        jQuery(function ($) {

            loaddata(-1);
       
        var cellsrenderer = function (row, column, value) {
            var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "ArticleID");
            var image = $("#jqxgrid").jqxGrid('getcellvalue', row, "Image");
            var title = $("#jqxgrid").jqxGrid('getcellvalue', row, "Title");
            var summary = $("#jqxgrid").jqxGrid('getcellvalue', row, "Summary");
            var viewcount = $("#jqxgrid").jqxGrid('getcellvalue', row, "ViewCount");
            //alert(name);
            var html = '<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="font-weight: bold; font-size: 14px; padding: 0px; padding-top: 5px; padding-bottom: 20px;">';
            html += '<div class="col-md-4 col-sm-4 col-lg-4 hidden-xs" style="padding: 5px; text-align: center; background: #fff;">';
            html += '<a style="text-decoration:none;" href="tintuc_detail.aspx?id=' + id + '"><img src="' + image + '" style="width:100%;max-height:227px;" /></a>';
            html += '</div>';
            html += '<div class="col-md-8 col-sm-8 col-xs-12 col-lg-8">';
            html += '<h3 style="font-size:24px;"><a  style="text-decoration:none;" href="tintuc_detail.aspx?id=' + id + '">' + title + '</a></h3>';
            html += '<h5 style="padding-top:10px;height: 102px; overflow: hidden;width:100%;text-align:justify;font-size:17px;">' + summary + '</h5>';
            html += '<div>';
            html += '<a href="tintuc_detail.aspx?id=' + id + '"><button class="btn" style="background: #333; border-radius: 0px; color: #fff; font-weight: bold; margin-right: 20px;">Xem chi tiết </button></a>';
            html += '<span style="margin-right: 20px; color: #066"><i class="fa fa-eye"></i>' + viewcount + '</span>';
            html += '<span>';
            html += '<i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>';
            html += '<i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>';
            html += '<i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>';
            html += '<i style="color: #fa0; margin-right: 3px;" class="fa fa-star"></i>';
            html += '<i style="color: #fa0; margin-right: 3px;" class="fa fa-star-o"></i>';
            html += '</span>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            //alert(html);
            return html;
        };
        function loaddata(groupid) {
            $("#jqxgrid").jqxGrid('showloadelement');
            var postValue = "{groupid:" + groupid + ", keyword:'" + $("#txtKeyword").val() + "'}";
            //alert(postValue);
            $.ajax({
                type: "POST",
                url: "Tintuc.aspx/LoadNews",
                data: postValue,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'ArticleID', type: 'int' },
                    { name: 'Title', type: 'string' },
                    { name: 'Summary', type: 'string' },
                      { name: 'CategoryName', type: 'string' },
                      { name: 'GroupName', type: 'string' },
                      { name: 'Show', type: 'string' },
                { name: 'ViewCount', type: 'int' },
                  { name: 'Image', type: 'string' }
                ],
                id: 'ArticleID',
                localdata: data,
                pager: function (pagenum, pagesize, oldpagenum) {
                }
            };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#jqxgrid").jqxGrid(
                    {
                        width: true,
                        source: dataAdapter,
                        selectionmode: 'multiplerowsextended',
                        sortable: true,
                        pageable: true,
                        showheader: false,
                        columnsresize: true,
                        pagermode: 'simple',
                        autorowheight: true,
                        autoheight: true,
                        columns: [
                          { text: 'Tên bài viết', datafield: 'Title', cellsrenderer: cellsrenderer },
                        ]
                    });

                }
            });
        }
        });
    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-1 col-lg-1 hidden-sm hidden-xs"></div>
    </div>
</asp:Content>
